<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="my-card">
        <div slot="header" class="clearfix">
          <!-- 左侧表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.user"
                placeholder="关键字"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" class="my-item-two">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="my-shou" @click="delSubmit"
                >清除</el-button
              >
              <el-button type="primary" class="my-cha" @click="getArticles"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item style="float: right">
              <!-- 右侧 -->
              <el-button
                class="my-btn"
                style="padding: 3px 0"
                type="text"
                @click="$refs.artDialog.dialogFormVisible = true"
              >
                <i class="el-icon-edit"></i>
                操作按钮
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-alert type="info" :closable="false">
          &nbsp;
          <span>数据一共{{ tableSize }}条</span>
        </el-alert>

        <!-- v-for="(obj, index) in tableRes.items"
          :key="obj.id" -->
        <!-- 列表 -->
        <el-table :data="tableRes" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="380">
            <template slot-scope="{ row }">
              <span>{{ row.title }}</span>
              &nbsp;
              <i
                v-show="row.videoURL"
                :style="{ fontSize: '20px', color: 'purple' }"
                class="el-icon-video-play"
                @click="
                  $refs.myVideo.show = true;
                  $refs.myVideo.title = row.title;
                "
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="80">
          </el-table-column>
          <el-table-column prop="username" label="录入人" width="140">
          </el-table-column>
          <el-table-column prop="createTime" label="录入时间" width="220">
            <!-- formatDate -->
            <template slot-scope="{ row }">
              <div>
                {{ row.createTime | formatDate }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100">
            <template slot-scope="{ row }">
              <div>
                {{ row.state ? "启用" : "禁用" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="邮编" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" @click="smallShow(row)">预览</el-button>
              <el-button type="text" @click="disabledbtn(row)">{{
                row.state ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                :disabled="row.state == 1"
                @click="modifyData(row)"
                >修改</el-button
              >
              <el-button
                ref="delBtnDisabled"
                slot="reference"
                class="shanchu"
                type="text"
                :disabled="row.state == 1"
                @click="open(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="float: right; margin: 20px">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="tableNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableSize"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 视频播放 -->
    <Video ref="myVideo"></Video>
    <!-- 查询 -->
    <ArtdialogSmall ref="smallArt" :list="smalList"></ArtdialogSmall>
    <!-- 弹出层 -->
    <ArticlesDialog ref="artDialog" @getArticles="getArticles"></ArticlesDialog>
  </div>
</template>

<script>
import { getArticles, delArticles, postState } from "@/api/articles";
import ArticlesDialog from "./components/articles-dialog.vue";
import ArtdialogSmall from "./components/artdialog-small.vue";
import Video from "./components/video.vue";
export default {
  components: { ArticlesDialog, ArtdialogSmall, Video },
  name: "articles",
  data() {
    return {
      formInline: {
        user: "",
        region: null,
      },

      currentPage: 1, //底部默认显示第几页
      pageSizes: [5, 8, 10, 20], //决定一页显示几条
      tableNum: 5, //一个页面展示的条数
      tableSize: 0, //总的条数

      // keyword: "",
      // state: null,
      tableRes: [], //列表数据

      smalList: {},
    };
  },
  methods: {
    // 删除的弹框
    open(row) {
      // console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delData(row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 按钮禁用
    async disabledbtn(row) {
      // row.state = !row.state;
      if (row.state == 0) {
        row.state = 1;
      } else {
        row.state = 0;
      }

      // console.log(row);
      await postState(row.id, row.state);
    },
    //删除
    async delData(row) {
      // console.log(row);
      await delArticles(row.id);
      this.getArticles();
    },
    // 修改
    modifyData(row) {
      this.$refs.artDialog.formData = row;
      this.$refs.artDialog.dialogFormVisible = true;

      this.$refs.artDialog.getshowData();
    },
    // 预览
    smallShow(row) {
      this.$refs.smallArt.dialogVisible = true;
      this.smalList = row;
    },
    // 获取文章列表
    async getArticles() {
      const res = await getArticles({
        page: this.currentPage,
        pagesize: this.tableNum,
        keyword: this.formInline.user,
        state: this.formInline.region,
      });
      this.tableRes2 = res;
      this.tableSize = res.counts;
      this.tableRes = res.items;
      // console.log(this.tableNum);
    },

    // 操作按钮
    delSubmit() {
      this.formInline.user = "";
      this.formInline.region = null;
      this.getArticles();
    },

    //底部页码，改变条数时触发
    handleSizeChange(val) {
      this.tableNum = val; //将请求的条数数与之关联
      this.getArticles(); //发起请求
      console.log(`每页 ${val} 条`);
    },
    // 改变页码时触发
    handleCurrentChange(val) {
      this.currentPage = val; //将请求的页数与之关联
      this.getArticles(); //发起请求
      console.log(`当前页: ${val}`);
    },
  },
  created() {
    this.getArticles();
  },
};
</script>

<style lang="scss" scoped>
.my-card[data-v-f70f99cc] .el-card__header {
  padding: 100px;
  border-bottom: 5px solid #ebeef5 !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
<style>
.my-card .shanchu {
  margin-left: 10px;
}
.my-card .el-card__header {
  padding-bottom: 0px;
  border-bottom: 0px solid #ebeef5 !important;
}
.my-card .el-card__body {
  padding-top: 0px;
}
.my-card .el-form-item {
  margin: 10px 0;
}
.my-card .el-alert {
  margin: 8px 0 16px;
}
.my-card .el-table__header-wrapper {
  border-bottom: 2px solid #e8e8e8;
  background-color: #fafafa;
}
.my-card th {
  background-color: #fafafa !important;
}
.my-card .my-btn {
  width: 95px;
  height: 32px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.my-card .my-shou {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
  margin-left: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.my-card .my-cha {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
}
.my-card .el-input__inner {
  height: 32px;
}
.my-card .my-item-two {
  margin-left: 40px;
}
</style>
